<template>
  <div class="addProject">
    <header>
      添加关联项目
      <i class="el-icon-close" @click="close"></i>
    </header>
    <main>
      <div class="search">
        <label>
          <span>施工单位</span>
          <el-select
            v-model="params.consUnit"
            clearable
            @change="getProjectList"
          >
            <el-option
              v-for="item in consUnitList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </label>
        <label class="province">
          <span>地区（市）</span>
          <el-select v-model="province" clearable placeholder="请选择省份" @change="selectProvince">
            <el-option
              v-for="item in provinces"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select
            v-model="params.area"
            clearable
            placeholder="请选择城市"
            @change="getProjectList"
          >
            <el-option
              v-for="item in cities"
              :key="item.code"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </label>
        <label>
          <span>项目状态</span>
          <el-select
            v-model="params.projectCompletion"
            clearable
            placeholder="全部"
            @change="getProjectList"
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in projectCompletionList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </label>
      </div>
      <table cellspacing="0">
        <thead>
          <th width="100px">
            <el-checkbox v-model="selectAll" @change="selectAllItem">全选</el-checkbox>
          </th>
          <th width="238px">项目名称</th>
          <th width="238px">项目编号</th>
          <th width="238px">项目位置</th>
          <th width="198px">施工单位</th>
          <th width="198px">项目状态</th>
        </thead>
      </table>
      <div class="tbody">
        <table cellspacing="0">
          <tbody>
            <tr v-for="item in projectList" :key="item.projectId">
              <td>
                <el-checkbox
                  v-model="item.ifSelect"
                  :disabled="item.disabled"
                  @change="addProjectId($event,item)"
                ></el-checkbox>
              </td>
              <td>
                <span>{{ item.projectName }}</span>
              </td>
              <td>
                <span>{{ item.projectNumber }}</span>
              </td>
              <td>
                <span>{{ item.projectAd }}</span>
              </td>
              <td>
                <span>{{ item.consUnit }}</span>
              </td>
              <td>
                <span
                  :class="item.projectCompletion === '监测中' ? 'green' : item.projectCompletion === '监测完成' ? 'yellow' : ''"
                >{{ item.projectCompletion }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
    <el-pagination
        v-if="projectList.length"
        @current-change="handleCurrentChange"
        :page-size="500"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    <footer>
      <span class="cancel" @click="cancel">取消</span>
      <span class="sureAdd" @click="submitNewProject">确定</span>
    </footer>
  </div>
</template>

<script>
import provinces from '../../../json/provinces.json'
import cityList from '../../../json/cities.json'
import { getProjectLists } from '@/api/project'
export default {
  data () {
    return {
      params: {
      // 页码
        index: 1,
        // 项目名称查询
        projectName: '',
        // 选中的施工单位
        consUnit: '',
        // 选中的地区(省级区划)
        province: '',
        // 选中的地区（市级区划）
        area: '',
        // 项目状态
        projectCompletion: '',
        // 项目编号
        projectId: '',
        // 单页数量
        pageSize: 500,
        // 用户id
        userId: ''
      },
      total: '',
      projectList: [],
      // 施工单位列表
      consUnitList: [],
      // 省级区划列表
      provinces,
      // 选中的省级区划
      province: '',
      provinceName: '',
      // 城市列表
      cities: [],
      // 项目状态列表
      projectCompletionList: [
        {
          id: 0,
          name: '监测中'
        },
        {
          id: 1,
          name: '未监测'
        },
        {
          id: 2,
          name: '监测完成'
        }
      ],
      ifSelect: '',
      addList: [],
      selectAll: false
    }
  },
  props: {
    selectProject: Array
  },
  computed: {

  },
  watch: {
    projectList: {
      deep: true,
      immediate: true,
      handler (val) {
        this.selectAll = val.every(item => item.ifSelect)
      }
    }
  },
  methods: {
    // 关闭弹框
    close () {
      this.$store.commit('set_ifShowCover', false)
    },
    // 获取施工单位列表
    getConsUnit () {
      this.$store.dispatch('project/getConsUnit').then(res => {
        if (res.data.data) {
          res.data.data.forEach((item, index) => {
            this.consUnitList.push({
              value: index,
              label: item
            })
          })
        }
      })
    },
    // 省级行政区划发生变化时，触发市级行政区划列表变化
    selectProvince (val) {
      this.$store.state.project.projectSearchDTO.area = ''
      if (val) {
        this.provinceName = this.provinces.filter(
          item => item.code === val
        )[0].name
      } else {
        this.provinceName = ''
      }
      this.$store.commit(
        'project/set_projectSearchDTO_province',
        this.provinceName
      )
      this.cities = cityList.filter(item => item.provinceCode === val)
      this.getProjectList()
    },
    // 获取项目列表
    getProjectList () {
      // await this.$store.commit('project/set_projectsearchDTO_pageSize', 1000)
      getProjectLists(this.params).then(res => {
        // console.log(res)
        this.projectList = res.data.data.data
        this.projectList.forEach(item => {
          this.selectProject.forEach(item2 => {
            if (item2.projectId === item.projectId) {
              item.ifSelect = true
              item.disabled = true
            }
          })
        })
      })
    },
    // 新增选中
    addProjectId (e, item) {
      item.ifSelect = e
      if (!e) {
        this.addList = this.addList.filter(it =>
          it.projectId !== item.projectId
        )
      } else {
        if (this.addList.some(item1 => item1.projectId === item.projectId)) {
          this.addList = this.addList.filter(item2 => item2.projectId !== item.projectId)
        } else {
          this.addList.push(item)
        }
      }
      this.$forceUpdate()
    },
    selectAllItem (val) {
      this.projectList = this.projectList.map(item => {
        if (!val) {
          item.ifSelect = val
          this.addList = []
        } else {
          item.ifSelect = val
          if (this.addList.every(part => part.projectId !== item.projectId)) {
            this.addList.push(item)
          }
          this.selectProject.forEach(item2 => {
            this.addList = this.addList.filter(
              item3 => item3.projectId !== item2.projectId
            )
            if (item2.projectId === item.projectId) {
              item.ifSelect = true
              item.disabled = true
            }
          })
        }
        return item
      })
    },
    // 子传父
    submitNewProject () {
      this.$emit('getNewProject', this.addList)
    },
    // 取消
    cancel () {
      this.addList = []
      this.$emit('getNewProject')
    },
    handleCurrentChange (val) {
      this.params.index = val
      this.getProjectList()
    }
  },
  created () {
    this.getConsUnit()
    this.$store.dispatch('project/reset')
    getProjectLists(this.params).then(res => {
      this.projectList = res.data.data.data
      this.total = res.data.data.count
      this.projectList.forEach(item => {
        this.selectProject.forEach(item2 => {
          if (item2.projectId === item.projectId) {
            item.ifSelect = true
            item.disabled = true
          }
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  height: 36px!important;
}

.addProject {
  z-index: 999;
  width: 1200px;
  height: 780px;
  background-color: #fff;
  border-radius: 5px;

  header {
    height: 72px;
    border-bottom: 1px solid #e6e6e6;
    line-height: 72px;
    padding-left: 20px;
    font-size: 18px;
    color: #333;
    position: relative;
    i {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }

  main {
    .search {
      height: 90px;
      padding-top: 35px;
      padding-left: 40px;
      label {
        margin-right: 30px;
        span {
          font-size: 14px;
          color: #666;
          margin-right: 12px;
        }
        .el-select {
          width: 240px;
        }
      }

      .province {
        .el-select {
          width: 155px;
          margin-right: 10px;
        }
      }
    }
    & > table {
      width: calc(100% - 60px);
      margin: 0 auto;
      text-align: left;
      thead {
        width: 100%;
        th {
          height: 60px;
          font-weight: normal;
          color: #333333;
          font-size: 14px;
          background-color: rgba(87, 131, 255, 0.05);
          padding-left: 30px;
          border-bottom: 1px solid #e6e6e6;
        }
      }
    }
    .tbody {
      width: calc(100% - 60px);
      margin: 0 auto;
      text-align: left;
      height: 384px;
      overflow-y: auto;
      overflow-x: hidden;
      table {
        tbody {
          tr {
            td {
              height: 64px;
              padding-left: 30px;
              border-bottom: 1px solid #e6e6e6;
              font-size: 14px;
              color: #666;
              span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 208px;
                display: inline-block;
              }
              &:nth-child(1) {
                .el-checkbox {
                  padding-right: 56px;
                }
              }
              &:nth-child(5) {
                span {
                  width: 168px;
                }
              }
              &:nth-child(6) {
                span {
                  width: 98px;
                }
              }
            }
          }
        }
      }

      &::-webkit-scrollbar {
        width: 4px;
        height: 120px;
        // scrollbar-arrow-color: red;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: rgba(220, 220, 220, 1);
        // scrollbar-arrow-color: red;
      }
      &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #fff;
      }
    }
  }
  ::v-deep .el-pagination{
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }
  footer {
    height: 110px;
    border-top: 1px solid #e6e6e6;
    position: absolute;
    bottom: 0;
    width: 100%;

    span {
      position: absolute;
      width: 128px;
      height: 48px;
      top: 32px;
      text-align: center;
      line-height: 48px;
      border-radius: 24px;
      font-size: 18px;
      cursor: pointer;
    }
    .cancel {
      left: 460px;
      border: 2px solid #4868ff;
      color: #4868ff;
    }

    .sureAdd {
      left: 612px;
      background-color: #4868ff;
      color: #fff;
    }
  }
}
</style>
